<template>
<div style="margin-left: 20px;margin-top: 10px">
  <div>
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="search.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="search.role" placeholder="请选择用户角色">
          <el-option label="管理员" value="管理员" />
          <el-option label="员工" value="员工" />
          <el-option label="学员" value="学员" />
        </el-select>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="search.realname" placeholder="请输入真实姓名" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadData">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table border :data="users">
      <el-table-column fixed prop="id" label="序号" sortable width="100" />
      <el-table-column prop="username" label="用户名" width="200" />
      <el-table-column prop="role" label="角色" width="120" />
      <el-table-column prop="realname" label="真实姓名" width="120" />
      <el-table-column prop="sex" label="性别" width="100" />
      <el-table-column prop="bithday" :formatter="getage"  label="年龄" width="100" ></el-table-column>
      <el-table-column prop="bithday" label="生日" width="150" />
      <el-table-column prop="ctime" sortable label="创建时间" width="200" />
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button @click="openUpdate(scope.row)" type="text" size="small">修改</el-button>
          <el-button type="text" @click="del(scope.row.id,scope.$index)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div style="float: right;margin-right: 30px;margin-top: 20px">
    <el-pagination background layout="prev, pager, next" :total="total" />
  </div>
  <div>
    <el-dialog title="修改用户信息" :visible.sync="dialog">
      <el-form :model="user" label-width="120px">
        <el-form-item label="用户名">
          <el-input v-model="user.username" :disabled="true"/>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="user.realname" />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="user.role" placeholder="请选择用户的角色" :disabled="true">
            <el-option label="管理员" value="管理员" />
            <el-option label="员工" value="员工" />
            <el-option label="学员" value="学员" />
          </el-select>
        </el-form-item>
        <el-form-item label="密码">
          <el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-radio v-model="user.sex" label="男">男</el-radio>
          <el-radio v-model="user.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker v-model="user.bithday" type="date" placeholder="请选择出生日期" style="width: 100%;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定 修 改</el-button>
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
import request from '@/utils/request'
export default {
  data(){
    return{
      users:[],
      total:10,
      search:{
        type:"",
        title:"",
        page:1,
        size:10
      },
      user:{},
      dialog:false
    }
  },
  mounted() {
    this.loadData();
  },
  methods:{
    loadData(){
      //请求接口 axios get 键值对
      request({
        url: "api/user/all.do",
        method: 'get',
        params:this.search
      }).then(res=>{
        if(res.code==0){
          this.users=res.data.list;
          this.total=res.data.size;
        }
      })
    },
    getage(row, column) {
      const date = row[column.property]
      console.log(date);
      const d1=new Date().getFullYear();
      console.log()
      const d2=Number.parseInt(date.substr(0,4));
      return d1-d2;
    },
  del(id,index){
    var msg = "您真的确定要删除吗？\n\n请确认！";
    if (confirm(msg)==true) {
      //请求接口 删除数据
      request({
        url: "api/user/del.do",
        method: 'post',
        data:{id: id}
      }).then(res => {
        if (res.data.code == 0) {
          this.users.splice(index, 1)
        }
      })

    }
   },
  openUpdate(obj){
      this.user=obj;
      this.dialog=true;
  },
    update(){
      //请求接口 修改数据
      request({
        url: "api/user/update.do",
        method: 'post',
        data:this.user
      }).then(res=>{
        if(res.code==0){
          this.dialog=false;
          this.loadData();
        }
      })
    }
  }
}

</script>

<style scoped>

</style>
